<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">考研计划</block>
		</cu-custom>

		<view class="wrap" v-if="show == 2">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#39b54a" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<!-- 第一页 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<!-- 重要时间节点 -->
						<view class="cu-timeline">
							<view class="cu-time">
								<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
								<text class='text-xl margin-left'>重要时间节点（以2020年为例）</text>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">1月份</view>
										<view class="cu-tag bg-green">研究生考试阅卷</view>
									</view>
									<view class="margin-top">全国硕士生入学考试阅卷开始，北京地区首先开始阅卷，教育部考试中心根据北京地区阅卷情况制定阅卷标准全国范围内进行阅卷。
									</view>
									<view class="margin-top-sm"></view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">2月份</view>
										<view class="cu-tag bg-green">硕士研究生查成绩</view>
									</view>
									<view class="margin-top">2月份中旬陆续公布成绩，可通过招生单位公布的途径查询。</view>
									<view class="margin-top-sm"></view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">3月份</view>
										<view class="cu-tag bg-green">复试准备、择校择专业</view>
									</view>
									<view class="margin-top">2、3月份和9月初：择校择专业。</view>
									<view class="margin-top-sm"></view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">4月份</view>
										<view class="cu-tag bg-green">国家线公布</view>
									</view>
									<view class="margin-top">4月14日国家线公布。</view>
									<view class="margin-top-sm">4月26日~4月30日：复试网上咨询活动。</view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">5月份</view>
										<view class="cu-tag bg-green">研究生复试+调剂</view>
									</view>
									<view class="margin-top">5月初：复试工作启动，原则上不早于4月30日。</view>
									<view class="margin-top-sm">
										5月19日：调剂意向采集系统“预调剂系统”，是考生和招生单位提前双向沟通的官方渠道。一般情况是在国家线公布前一周左右开通。</view>
									<view class="margin-top-sm">5月20日~6月30日：网上调剂服务系统开通。</view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">6月份</view>
										<view class="cu-tag bg-green">公示拟录取名单</view>
									</view>
									<view class="margin-top">5月末~7、8月份：各院校保研夏令营陆续开始。</view>
									<view class="margin-top-sm">6月初：研究生录取通知书陆续发布。</view>
									<view class="margin-top-sm">6月中旬：考研大纲开始修订。</view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">7月份~8月份</view>
										<view class="cu-tag bg-green">复习备考，招生简章</view>
									</view>
									<view class="margin-top">7月下旬~9月中旬：各研招机构定制招生计划。</view>
									<view class="margin-top-sm">8月上旬~9月初：招生简章及招生专业目录（政策、招生计划、考试科目、参考教材变化）。</view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">9月份</view>
										<view class="cu-tag bg-green">考试大纲，招生简章，考研预报名</view>
									</view>
									<view class="margin-top">9月9日：考试大纲公布（新增考点）。</view>
									<view class="margin-top-sm">9月19~9月23：研招网开放网上咨询周。</view>
									<view class="margin-top-sm">9月24~9月27：考研预报名时间。</view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">10月份</view>
										<view class="cu-tag bg-green">正式报名</view>
									</view>
									<view class="margin-top">10月10日~10月31日：网上正式报名（填写考生信息+填写报考信息两大步骤）。</view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">11月份</view>
										<view class="cu-tag bg-green">备考冲刺，现场确认</view>
									</view>
									<view class="margin-top">11月中旬：现场确认（网上确认）由各报考点自定。</view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">12月份</view>
										<view class="cu-tag bg-green">打印准考证，备考冲刺，考研初试</view>
									</view>
									<view class="margin-top">12月19日~12月28日：打印准考证时间。</view>
									<view class="margin-top-sm">12月26日~12月27日：考研初试时间。</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 第二页 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<!-- 时间规划建议 -->
						<view class="cu-timeline">
							<view class="cu-time">
								<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
								<text class='text-xl margin-left'>全年时间安排建议</text>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">第一阶段</view>
										<view class="cu-tag bg-green">11月-次年3月</view>
									</view>
									<view class="margin-top">定专业选学校，英语、数学开始复习。</view>
									<view class="margin-top-sm"></view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">第二阶段</view>
										<view class="cu-tag bg-green">3月-6月</view>
									</view>
									<view class="margin-top">英语、数学、专业课过完一轮。</view>
									<view class="margin-top-sm"></view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">第三阶段</view>
										<view class="cu-tag bg-green">7月-8月</view>
									</view>
									<view class="margin-top">英语、数学、专业课过完二轮，政治一轮开始。</view>
									<view class="margin-top-sm"></view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">第四阶段</view>
										<view class="cu-tag bg-green">9月-11月</view>
									</view>
									<view class="margin-top">报名+现场确认</view>
									<view class="margin-top-sm">英语、数学、专业课三轮复习结束，政治二轮结束。</view>
								</view>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag line-green">第五阶段</view>
										<view class="cu-tag bg-green">12月</view>
									</view>
									<view class="margin-top">冲刺，查缺补漏。</view>
									<view class="margin-top-sm"></view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>

				<!-- 第三页 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<!-- 资料获取途径 -->
						<view class="cu-timeline">
							<view class="cu-time">
								<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
								<text class='text-xl margin-left'>目标院校的官网</text>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view>
										<view>
											大多数学校都会在每年发布招生简章的同时附一份招生专业目录和各个专业的参考书目，大家可以先参考去年的参考书目。需要注意的是，院校的招生专业目录和参考书目会在发布当年招生简章的时候有部分变动，需要同学们在招生简章发布之后再关注一下。
										</view>
									</view>
								</view>
							</view>


							<view class="cu-time">
								<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
								<text class='text-xl margin-left'>各种社交网站，贴吧</text>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view>
										<view>
											利用你所能利用的各种网站和贴吧，进行参考书目的相关搜索。或者参考往届考研的学长学姐在贴吧分享的经验帖，里面会提到大量的参考书和复习资料。但是，在网站上搜集的参考书目往往准确性不够高，并且对于版本和作者介绍不够详细，需要仔细甄别。
										</view>
									</view>
								</view>
							</view>


							<view class="cu-time">
								<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
								<text class='text-xl margin-left'>本校的学长学姐</text>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view>你所在的学校有刚好和你考同一个院校，同一个专业的学长学姐是一种非常理想的状态，可以直接拿到最详细的书单，也能直接学习考研的经验。</view>
								</view>
							</view>

							<view class="cu-time">
								<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
								<text class='text-xl margin-left'>目标院校的学长学姐</text>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view>
										如果你没有本校的学长学姐，刚好目标院校又没有提供参考书目，那就需要费一点周折去寻找目标院校的学长学姐了，他们不仅有最详细的参考书目，还可以告诉你他们平时上课都用了哪些书，方便你深入学习。寻找这些学长学姐的方法很多，比如去复试现场等待，这是最直接，最准确的方法。当然，目标院校如果离你的学校很远，出于安全考虑，可以去目标院校的bbs或者通过其他社交网站寻找。
									</view>
								</view>
							</view>

							<view class="cu-time">
								<text class='cuIcon-selection text-white text-lg bg-green round padding-xs'></text>
								<text class='text-xl margin-left'>其他渠道</text>
							</view>
							<view class="cu-item text-green">
								<view class="content">
									<view>通过所报考的考研辅导班来获知，部分课程中老师会将自己总结的十年真题发布给大家。</view>
								</view>
							</view>


						</view>

					</scroll-view>
				</swiper-item>



			</swiper>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: 1,
				current: 0,
				list: [{
						name: '重要时间节点'
					},
					{
						name: '时间规划建议'
					},
					{
						name: '资料获取途径'
					}
				],
				swiperCurrent: 0,
				dx: 0,
			};
		},
		onLoad(option) {
			console.log(option.mid)
			if (option.mid == 1) {
				this.show = 1;
			} else {
				this.show = 2;
			}
		},
		methods: {
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style lang="scss" scoped>

	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.cu-timeline .cu-time {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}

	.text-red,
	.line-red,
	.lines-red {
		color: #FF3434;
	}

	.margin-avatar {
		margin-left: -15rpx;
	}

	.margin-avatar-bottom {
		margin-bottom: 150rpx;
	}

	.line-green-tuniao::after {
		border-color: #00ff00 !important;
		color: #00ff00;
	}

	.resume {
		/* background: #f1f1f1; */
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
	}

	.edit {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 250rpx;
		right: 30rpx;
		z-index: 1;
		opacity: 0.8;
		border: 1px solid #00ff00;
		border-radius: 100rpx;
		box-shadow: 0rpx 0rpx 6rpx rgba(0, 255, 0, 1.0);
		padding: 20rpx;
	}

	.love {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 550rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		border: 1px solid #00ff00;
		border-radius: 100rpx;
		box-shadow: 0rpx 0rpx 6rpx rgba(0, 255, 0, 1.0);
		padding: 20rpx;
	}

	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
	}

	.share-png {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
	}

	.share-wechat {
		width: 35rpx;
		height: 35rpx;
		margin: 0 10rpx -4rpx 0;
		opacity: 0.5;
	}

	.button-no::after {
		border: none;
	}

	.title-pyq {
		background-image: -webkit-linear-gradient(0deg, #00ff00, #00ff00);
		/*1B6CFF 1B42FF*/
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		opacity: 0.5;
	}

	.edit-fixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.button-no {
		border: none;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #00ff00 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
